/*
* @Author: Choisaaaa
* @Date: 2018/5/9  11:48
* 用户发布 编辑商品
*/
require("./seller-product-save.css")
require("page/common/nav/nav.js");
require("page/common/header/header.js");
require ('simditor/styles/simditor.css');
var _mm = require("util/mm.js");
var navSide = require("page/common/nav-side/nav-side.js");              //侧边导航模块
var _productCategory = require("service/product-category-service.js");  //商品种类数据请求
var _product = require("service/product-service.js");                   //商品的数据请求
var _uploadImage = require("service/img-upload-service.js");            //上传图片数据请求
var Simditor =  require("simditor");                                    //富文本编辑器
var productSaveHtml = require("./seller-product-save.string");          //渲染页面的HTMl模板

var page = {
    productData : {                         //进行商品编辑时保存的数据
        isUpdate : false,                   //标记是否更新
        productId : _mm.getUrlParam("pid"), //缓存URL上的productId
        productDesc : "",                   //缓存商品的详细信息
        parentCategoryId : "",              //缓存商品的二级品类品类ID
        categoryId : ""                     //缓存商品的一级商品品类ID
    },
    imagesDate :{
        maxFile : 5 ,                       //详细图片的最大上传量
        imgSrc : [],                        //保存详细图片的URL地址的数组、
        updateImgSrc : [],                  //保存详细图片的URL地址的数组
        imgFile : [],                       //保存详细图片的文件流的数据
        imgName : [],                       //保存详细图片文件名的数据
        subImgsAddr  : ""                   //详细图片数据从后台反馈回来URI地址的拼接
    },
    simditorValue : {
        value : ""                          //保存富文本插件的输入值
    },
    init : function(){
        this.onLoad();
    },
    onLoad : function () {
        this.onLoadProductInfo();
    },
    onLoadOther : function () {
        this.onLoadSide();              //加载侧边导航
        this.onLoadSimditor();          //加载富文本插件
        this.onLoadCategoryList();      //加载商品种类列表
        this.bindEvent();
    },
    onLoadProductInfo : function () {
        var productId = this.productData.productId,
            _this = this;
        if(productId){
            _product.getProductDetail(productId, function (res) {
                var html = _mm.renderHtml(productSaveHtml,res.data);
                $(".seller-product-save").html(html);
                _this.assembleDate(res.data);   //缓存数据
                _this.addNewContent();          //渲染详细+图片
                _this.onLoadOther();
            }, function (err) {
                _mm.errorTips(err.msg);
                window.history.back();
            });
        }else{
            var html = _mm.renderHtml(productSaveHtml,null);
            $(".seller-product-save").html(html);
            _this.onLoadOther();
        }
    },
    assembleDate : function (data) {
        this.productData.isUpdate = true;
        this.simditorValue.value = data.productDesc;
        this.productData.productDesc = data.productDesc;
        this.productData.categoryId = data.categoryId;
        this.productData.parentCategoryId = data.parentCategoryId;
        this.imagesDate.subImgsAddr = data.subImgsAddr;
        var host = data.imageHost,
            subImages =data.subImgsAddr,
            images = subImages.split(","),
            _this = this;
        images.map(function (imageUri) {
            _this.imagesDate.imgSrc.push(host+imageUri);
            _this.imagesDate.updateImgSrc.push(imageUri);
        });
    },
    bindEvent : function () {
        this.selectFirstCategory();     //选择一级商品种类触发的事件
        this.onChangeFiles();           //选择上传详细图片的输入框触发的事件
        this.imgDisplay();              //点击上传图片的触发事件
        this.closePicture();            //关闭打开上传图片的事件
        this.imgDelete();               //删除上传图片的事件
        this.bindEditorEvent();         //编辑富文本时触发的事件
        this.onClickBtn();              //点击提交按钮触发的事件
    },

    /** 1.初始化加载页面时的数据渲染 **/
    onLoadSide : function(){ //1.1:初始化侧边导航
        navSide.init({
            name : "seller-center"
        });
    },
    onLoadSimditor : function () { //1.2:加载化富文本插件
        this.simditor = new Simditor({
            textarea: $('#editor'),
            placeholder : "请输入商品详情描述",
            upload: {
                url             : 'http://www.choisaaaa.campuso2o.com/image/richtext_img_upload.do',//保存富文本图片的服务器请求
                defaultImage    : '',
                fileKey         : 'upload_file',
                leaveConfirm : "正在上传文件"
            },
        });
        if(this.productData.productDesc){
            this.simditor.setValue(this.productData.productDesc);
        }
    },
    onLoadCategoryList : function(){//1.3:加载商品种类的一级列表
        var _this = this;
        _productCategory.getCategoryList({}, function (res) {
            _this.LoadFistSelect(res.data);
        }, function (err) {
            _mm.errorTips(err.msg)
        });
    },
    LoadFistSelect : function (data) {
        var _this = this,
            html = this.renderOptionHtml(data),
            parentCategoryId =  this.productData.parentCategoryId,
            categoryId = this.productData.categoryId,
            $firstCategory =  $("#firstCategory");
        $firstCategory.html(html);
        $firstCategory.val(parentCategoryId);
        if(categoryId){
            _productCategory.getCategoryList(parentCategoryId, function (res) {
                _this.LoadSecondSelect(res.data);
            }, function (err) {
                _mm.errorTips(err.msg)
            });
        }
    },

    /** 2.事件绑定 **/
    selectFirstCategory  : function(){//2.1：选择一级商品种类后，加载子商品种类
        var _this = this;
        $("#firstCategory").change(function () {
            var parentCategoryId = $(this).val();
            _productCategory.getCategoryList(parentCategoryId, function (res) {
                _this.LoadSecondSelect(res.data);
            }, function (err) {
                _mm.errorTips(err.msg)
            });

        });
    },
    LoadSecondSelect : function(data){
        var $secondCategory = $("#secondCategory");
        $secondCategory.addClass("show");
        var html = this.renderOptionHtml(data);
        $secondCategory.html(html);
        $secondCategory.val(this.productData.categoryId);
    },

    onChangeFiles : function () {//2.2：点击上传详细图片input触发的事件
        var _this = this;
        $("#file").on("change", function () {
            var fileImg = $("#file")[0];
            var fileList = fileImg.files;
            if(_this.imagesDate.imgFile.length > _this.imagesDate.maxFile){ //判断当前的上传的图片是否已经超过6张
                _mm.errorTips("上传图片不能超过6张");
                $("#inputBox").addClass("hidden");
                return;
            }
            for(var i =0 ;i< fileList.length ; i++){ //数据缓存
                var imgSrc = _this.getObjectURL(fileList[i]);
                _this.imagesDate.imgName.push(fileList[i].name);
                _this.imagesDate.imgSrc.push(imgSrc);
                _this.imagesDate.imgFile.push(fileList[i]);
            }
            _this.addNewContent();
        });
    },
    imgDisplay : function () { //2.3：点击上传的图片，全屏显示
        $(document).on("click",".imgContainer", function () {
            var src = $(this).attr("src");
            var imgHtml = '<div class="onClickImage-div">' +
                                '<img class="onClickImage-img" src="' + src + '"/>' +
                                '<p class="onClickImage-p closePicture">×</p>' +
                         '</div>'
            $('body').append(imgHtml);
        });
    },
    closePicture : function () {//2.4：关闭全屏显示的详细图片
        $(document).on("click",".closePicture", function () {
            $(this).parent("div").remove();
        })
    },
    imgDelete : function () {//2.5：删除上传的详情图片
        var _this = this;
        $(document).on("click",".imgDelete", function () {
            var index = $(this).attr("id");
            _this.imagesDate.imgSrc.splice(index,1);
            _this.imagesDate.imgFile.splice(index,1);
            _this.imagesDate.imgName.splice(index,1);
            _this.imagesDate.updateImgSrc.splice(index,1);
            _this.addNewContent();
        })
    },
    bindEditorEvent : function () { //2.6：富文本插件的值改变触发的事件
        var _this = this;
        this.simditor.on('valuechanged', function () {
            _this.simditorValue.value = this.getValue();
        });
    },
    onClickBtn : function () {//2.7 ：提交按钮触发事件
        var _this = this;
        $(document).on("click","#submit-btn",function(){
            //1.先提交商品的详情图片
            var imgFileList = _this.imagesDate.imgFile;
            var imgFileSize =  imgFileList.length ;
            if(_this.productData.isUpdate && imgFileSize === 0){
                _this.setSubUpdateImagesString();
                _this.submitProduct();
                return;
            }else if(imgFileSize === 0){
                _mm.errorTips("商品的详情图片不能为空！");
                return;
            }
            var formData = new FormData();
            for (var i = 0 ; i < imgFileSize ; i++){
                formData.append('detail-img'+i,imgFileList[i]);
            }
            _uploadImage.uploadImage(formData, function (res) {//上传图片
                _this.getSubImagesString(res.data);
                _this.submitProduct();//上传图片成功后提交其他信息
            }, function (res) {
                _mm.errorTips(res.msg);
            });
        });
    },
    submitProduct : function () { //提交表单字段
        //获取各个字段的value值
        var _this = this,
            id = _this.productData.productId,
            firstCategory = $.trim($("#firstCategory").val()),
            secondCategory = $.trim($("#secondCategory").val()),
            productDesc = this.simditorValue.value;
        var categoryId = secondCategory !== "" ? secondCategory : firstCategory;
        var productInfo = {
            categoryId :parseInt(categoryId),
            productName : $.trim($("#productName").val()),
            productSubtitle :$.trim($("#product-sub").val()),
            normalPrice :  parseFloat($.trim($("#normal-price").val())),
            promotionPrice : parseFloat($.trim($("#promotion-price").val())),
            productStock : parseInt($.trim($("#stock").val())),
            productDesc : productDesc,
            subImgsAddr : this.imagesDate.subImgsAddr,
        };
        if(this.productData.isUpdate){
            productInfo.id = parseInt(id);
        }
        var productCheckResult = _product.checkProduct(productInfo);//校验字段
        if(productCheckResult.status){
            _product.saveProduct(productInfo, function () {
                if(_this.productData.isUpdate){
                    _mm.successTips("恭喜！你更新商品信息成功。正等待--->【后台管理员】审核")
                }else{
                    _mm.successTips("恭喜！你已经成功发布商品。正等待--->【后台管理员】审核")
                }
                window.location.href = "./seller-product-list.html"
            }, function (err) {
                _mm.errorTips(err.msg);
            })
        }else{
            _mm.errorTips(productCheckResult.msg);
        }
    },

    /**  3.辅助函数 **/
    getSubImagesString : function (data){ //3.1：将详细图片的URI地址拼接成一个string
        var images = data.map(function (image) {
           return image.uri
        }).join(",");
        if(this.productData.isUpdate){
            var oldImages = this.imagesDate.updateImgSrc
            if(oldImages.length  > 0){
                var oldSubImages = oldImages.map(function (oldImage) {
                    return oldImage;
                }).join(",");
                this.imagesDate.subImgsAddr = oldSubImages +','+images; //如果是更新而且就的详细图片还存在，就将就得地址拼接上新的的地址
            }else{
                this.imagesDate.subImgsAddr += images;
            }
        }else{
            this.imagesDate.subImgsAddr += images;
        }
    },
    setSubUpdateImagesString : function () {
        var oldImages = this.imagesDate.updateImgSrc
        if(oldImages.length  > 0){
            var oldSubImages = oldImages.map(function (oldImage) {
                return oldImage;
            }).join(",")
        }
      this.imagesDate.subImgsAddr = oldSubImages;
    },

    getObjectURL : function (file) { //3.2：返回上传详细图片的URL地址
        var url = null;
        if(window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if(window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if(window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    },

    addNewContent : function () { //3.3加载上传的详细图片
        var imgName = this.imagesDate.imgName,
            imgSrc = this.imagesDate.imgSrc;
        $("#imgBox").html("");
        for (var i = 0; i < this.imagesDate.imgSrc.length ;i++){
            var oldBox = $("#imgBox").html();
            $("#imgBox").html(oldBox+'<div class="imgContainerDiv"><img  class="imgContainer" title=' + imgName[i] + ' alt=' + imgName[i] + ' src=' + imgSrc[i] + '><p id=' + i + ' class="imgDelete">删除</p></div>');
        }
    },

    renderOptionHtml : function(data){ //3.4：渲染下拉框子选项
        var html = "";
        data.map(function (item) {
            html += '<option value="'+item.id+'">'+item.productCategoryName+'</option>'
        });
        return html;
    }
}
$(function () {
    page.init();
});